<template>
    <div class="keyboard" :id="id">
        <div class="writeArea" @click="showKeyboard" :class="className">
            <slot></slot>
            <input type="text" v-model="showName" onfocus="this.blur();" placeholder="请输入车牌号" :style="styleName">
        </div>
        <div :id="id+'selectArea'" class="selectArea">
            <div class="shortName" v-show="showShortName">
                <ul class="clear">
                    <li v-for="(name,index) in shortName" :key="index" @click.stop.prevent="getShortName">{{name}}</li>
                    <li @click.stop.prevent="del" class="del">←</li>
                </ul>
            </div>
            <div v-show="!showShortName">
                <div class="number">
                    <ul class="clear">
                        <li v-for="(name,index) in number" :key="index" @click.stop.prevent="getNumber">{{name}}</li>
                    </ul>
                </div>
                <div class="letter">
                    <ul class="clear">
                        <li @click.stop.prevent="getLetter('Q')">Q</li>
                        <li @click.stop.prevent="getLetter('W')">W</li>
                        <li @click.stop.prevent="getLetter('E')">E</li>
                        <li @click.stop.prevent="getLetter('R')">R</li>
                        <li @click.stop.prevent="getLetter('T')">T</li>
                        <li @click.stop.prevent="getLetter('Y')">Y</li>
                        <li @click.stop.prevent="getLetter('U')">U</li>
                        <li @click.stop.prevent="getLetter('I')">I</li>
                        <li @click.stop.prevent="getLetter('O')">O</li>
                        <li @click.stop.prevent="getLetter('P')">P</li>
                        <li @click.stop.prevent="getLetter('A')">A</li>
                        <li @click.stop.prevent="getLetter('S')">S</li>
                        <li @click.stop.prevent="getLetter('D')">D</li>
                        <li @click.stop.prevent="getLetter('F')">F</li>
                        <li @click.stop.prevent="getLetter('G')">G</li>
                        <li @click.stop.prevent="getLetter('H')">H</li>
                        <li @click.stop.prevent="getLetter('J')">J</li>
                        <li @click.stop.prevent="getLetter('K')">K</li>
                        <li @click.stop.prevent="getLetter('L')">L</li>
                        <li class="del" @click="del">←</li>
                        <li @click.stop.prevent="getLetter('Z')">Z</li>
                        <li @click.stop.prevent="getLetter('X')">X</li>
                        <li @click.stop.prevent="getLetter('C')">C</li>
                        <li @click.stop.prevent="getLetter('V')">V</li>
                        <li @click.stop.prevent="getLetter('B')">B</li>
                        <li @click.stop.prevent="getLetter('N')">N</li>
                        <li @click.stop.prevent="getLetter('M')">M</li>
                        <li @click.stop.prevent="getLetter('港')" style="font-size: 18px">港</li>
                        <li @click.stop.prevent="getLetter('澳')" style="font-size: 18px">澳</li>
                        <li style="font-size: 16px" class="GOON" @click="ok">GO</li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</template>
<script>
    // import {Toast} from 'mint-ui'

    export default {
        data () {
            return {
                shortName: ['京', '津', '沪', '渝', '冀', '豫', '云', '辽', '黑', '湘', '皖', '鲁', '新', '苏', '浙', '赣', '鄂', '桂', '甘', '晋', '蒙', '陜', '吉', '闽', '贵', '粤', '青', '藏', '川', '宁', '琼'],
                number: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
                showName: this.isHoldShortName ? this.data.shortName : '',
                showShortName: !this.isHoldShortName,
                isEnough: false,
                keyBoardDom: ''
            }
        },
        props: {
            data: {
                shortName: {},
                letter: {},
                content: {
                    default: ''
                },
            },
            isHoldShortName: false,
            id: {
                default: 'keyboard'
            },
            className: {
                default: 'defaultClass'
            },
            styleName: {}
        },
        created: function () {
//     if(this.data.content!=''){
//       this.showName = this.data.content
//     }
        },
        mounted () {
            this.keyBoardDom = document.getElementById(this.id)
            let shortName = this.keyBoardDom.getElementsByClassName('shortName')[0].getElementsByTagName('li')
            let number = this.keyBoardDom.getElementsByClassName('number')[0].getElementsByTagName('li')
            let letter = this.keyBoardDom.getElementsByClassName('letter')[0].getElementsByTagName('li')
            let width = window.screen.availWidth
            for (let i = 0; i < shortName.length; i++) {
                shortName[i].style.lineHeight = width / 8 - 10 + 'px'
                shortName[i].style.width = (width - 10) / 8 - 10 + 'px'
            }
            for (let i = 0; i < number.length; i++) {
                number[i].style.lineHeight = width / 10 + 'px'
                number[i].style.width = (width - 10) / 10 - 6 + 'px'
            }
            for (let i = 0; i < letter.length; i++) {
                letter[i].style.lineHeight = width / 10 - 6 + 'px'
                letter[i].style.width = (width - 10) / 10 - 6 + 'px'
            }
        },
        methods: {
            //按下去的样式
            changeStyle (e) {
                e.target.style.boxShadow = '1px 1px 3px #999 inset'
                e.target.style.background = '#4DA9F2'
                e.target.style.color = '#ffffff'
//
                setTimeout(function () {
                    e.target.style.boxShadow = '1px 1px 1px 1px #999'
                    e.target.style.background = '#ffffff'
                    e.target.style.color = '#000'
                }, 100)
            },
            getShortName (e) {
                if (e.target.localName == 'li') {
                    this.changeStyle(e)
                    if (e.target.className != 'del' && !this.isEnough) {
                        this.showName = e.target.innerHTML
                    }
                }
            },
            getNumber (e) {
                if (e.target.localName == 'li') {
                    this.changeStyle(e)
                    if (e.target.className != 'del' && !this.isEnough) {
                        this.showName += e.target.innerHTML
                    }
                }
            },
            getLetter (data) {
                this.changeStyle(event)
                if (!this.isEnough) {
                    this.showName += data
                }
            },
            del () {
                if (this.isHoldShortName) {
                    if (this.showName.length > 1) {
                        this.showName = this.showName.substring(0, this.showName.length - 1)
                    }
                } else {
                    this.showName = this.showName.substring(0, this.showName.length - 1)
                }
            },
            ok () {
                this.$emit('callBack', this.showName)
                document.getElementById(this.id + 'selectArea').style.bottom = '-300px'
            },
            //事件绑定
            addHandler (element, type, handler) {
                if (element.addEventListener) {
                    element.addEventListener(type, handler, false)
                } else if (element.attachEvent) {
                    element.attachEvent('on' + type, handler)
                } else {
                    element['on' + type] = handler
                }
            },

            hideKeyboard (event) {
                let drapWIN = document.getElementById(this.id + 'selectArea')
                if (drapWIN && event.target.offsetParent != null && event.target.offsetParent.id != 'keyboard' && event.target.offsetParent.className != 'selectArea') {
                    drapWIN.style.bottom = '-300px'
                    this.$emit('callBack', this.showName)
                }
            },
            showKeyboard () {
                let keyboard = document.getElementById(this.id)
                let body = document.getElementsByTagName('body')[0]
                let drapWIN = document.getElementById(this.id + 'selectArea')
                drapWIN.style.bottom = 0
                this.addHandler(keyboard, 'touchstart', function (e) {
                    e.stopPropagation()
                })

                this.addHandler(body, 'touchstart', this.hideKeyboard)

            }

        },
        watch: {
            showName () {
                //手动移除提示框
                let tips = document.getElementsByClassName('tips')[0]
                if (tips) {
                    document.getElementsByTagName('body')[0].removeChild(tips)
                }

                //验证车牌号第一位是中文
                if (/^[\u4e00-\u9fa5]+$/.test(this.showName[0])) {
                    this.showShortName = false
                } else {
                    this.showShortName = true
                }

                if (this.showName.length > 7) {
                    this.isEnough = true
                } else {
                    // Toast({
                    //     message: this.showName,
                    //     className: 'tips',
                    // })
                    this.isEnough = false
                    this.data.content = this.showName
                    document.getElementsByClassName('GOON')[0].style.background = '#ccc'
                    if (this.showName.length == 7) {
                        document.getElementsByClassName('GOON')[0].style.background = 'green'
                        this.isEnough = true
                    }
                }
            }
        },
    }
</script>
<style scoped>
    .writeArea {
    }

    .writeArea .myContent {
        display: inline-block;
        text-indent: 15px;
    }

    /*弹出部分*/
    .selectArea {
        z-index: 9999;
        transition: all 0.5s;
        position: fixed;
        left: 0;
        width: 100%;
        background: #dddddd;
        padding: 5px;
        bottom: -300px;
    }

    .keyboardTop {
        text-align: center;
    }

    .selectArea li {
        padding: 0 !important;
        float: left;
        border-radius: 5px;
        text-align: center;
        box-sizing: border-box;
        margin: 5px;
        background: white;
        box-shadow: 1px 1px 1px 1px #999;
    }

    .number li, .letter li {
        margin: 4px 3px;
        font-size: 20px;
    }

    .selectArea .del {
        background: #ccc;
        color: #ff4016;
    }

    .selectArea .GOON {
        background: #ccc;
        color: white;
    }

    /*默认的样式*/
    .defaultClass input {
        border: none;

    }
</style>
